<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EUV</title>

    <style>
        a {
            --color-underline: blue;
            color: var(--color-underline);
            background: linear-gradient(to right, var(--color-underline), var(--color-underline)) no-repeat;
            background-position: left bottom;
            background-size: 0px 2px;
            transition: .3s;
            text-decoration: none;
            /* text-underline-offset: 0.2em; */
        }
        a:hover {
            background-size: 100% 2px;
            text-decoration: none !important;
        }

        body {
            background-color: white;
            box-sizing: border-box;
            margin: 0;
            padding: 1em 2em;
        }

    </style>
</head>
<body>
    <div id="app">
        <p>
            <a :href="giteeURL" target="_blank">gitee下载euv</a>
        </p>
        <p>
            <a e-bind:href="npmURL" target="_blank">npm下载euv</a>
        </p>

        <p e-show="eShow">
            {{ text }}
        </p>

        <div>
            <h2>数据嵌入测试</h2>
            <p>被嵌入文本：{{ text }}</p>
            <div>
                被嵌入文本：{{ text }}
                <p e-show="eShow">
                    被嵌入文本：{{ text }}
                </p>
            </div>
        </div>

        <h2>{{ subtitle }} {{ text }}</h2>
        <p>I am {{ name.last }}·{{ name.first }}</p>
        <p>{{ fullName }}</p>

        <div>
            <p>data source</p>
            <div>
                <p>{{ getDataSource[1].a[1] }}</p>
            </div>
        </div>

        <div>
            <p>{{ text }}</p>
            <ul>
                <li>
                    index: {{ index }}
                </li>
                <li>
                    {{ dataSource[1].a[index].b[dataSource[index].b.c[0]] }}
                </li>
            </ul>
        </div>

        <form @submit="change">
            <label for="">
                subtitle:
                <input ref="input-subtitle" type="text" e-model:value="subtitle">
            </label>
            <br/>
            <label for="">
                text:
                <input type="text" e-model:value="text">
            </label>
            <br/>

            <select name="" id="" e-model:value="selectValue">
                <option value="">please choose one</option>
                <option value="eShow">eShow</option>
                <option value="subtitle">subtitle</option>
                <option value="text">text</option>
            </select>
            <button>change</button>
        </form>

        <div>
            <h2>购物</h2>
            <div>
                <ul>
                    <li>
                        <h4>{{ goodsDataSource[0].name }}</h4>
                        <p>
                            价格：
                            <span>{{ goodsDataSource[0].price }}</span>
                            元
                        </p>
                        <p>{{ goodsDataSource[0].choose }}</p>
                        <button @click="添加goods" data-index="0">+</button>
                        <button @click="减少goods" data-index="0">-</button>
                    </li>

                    <li>
                        <h4>{{ goodsDataSource[1].name }}</h4>
                        <p>
                            价格：
                            <span>{{ goodsDataSource[1].price }}</span>
                            元
                        </p>
                        <p>{{ goodsDataSource[1].choose }}</p>
                        <button @click="添加goods" data-index="1">+</button>
                        <button @click="减少goods" data-index="1">-</button>
                    </li>

                    <li>
                        <h4>{{ goodsDataSource[2].name }}</h4>
                        <p>
                            价格：
                            <span>{{ goodsDataSource[2].price }}</span>
                            元
                        </p>
                        <p>{{ goodsDataSource[2].choose }}</p>
                        <button @click="添加goods" data-index="2">+</button>
                        <button @click="减少goods" data-index="2">-</button>
                    </li>

                    <li>
                        <h4>{{ goodsDataSource[3].name }}</h4>
                        <p>
                            价格：
                            <span>{{ goodsDataSource[3].price }}</span>
                            元
                        </p>
                        <p>{{ goodsDataSource[3].choose }}</p>
                        <button @click="添加goods" data-index="3">+</button>
                        <button @click="减少goods" data-index="3">-</button>
                    </li>
                </ul>

                <p>
                    total count:
                    <span>{{ totalCount }}</span>
                </p>
                <p>
                    total price:
                    <span>{{ totalPrice }}</span>
                </p>
            </div>
        </div>

    </div>
    <script src="euv.global.production.js"></script>
    <script>
        new EUV({
            elementSelector: "#app",

            mounted() {
                /** @type { HTMLInputElement } */
                const subtitleInput = this.$refs["input-subtitle"];
                console.log(subtitleInput);
                subtitleInput.value = "hello world";
            },

            data: {
                giteeURL: "https://gitee.com/flown/euv",
                npmURL: "https://www.npmjs.com/package/@hongweifei/euv",

                selectValue: "",
                eShow: true,
                subtitle: "副标题",
                text: "文本",
                index: 1,
                dataSource: [
                    "1",
                    {
                        a: [
                            { b: "2" },
                            { b: ["3", "4", "5"] },
                            { b: "4" }
                        ],
                        b: {
                            c: [1]
                        }
                    },
                ],
                name: {
                    first: "AA",
                    last: "BB"
                },

                goodsDataSource: [
                    {
                        name: "iphone",
                        price: 1000,
                        choose: 0,
                    },
                    {
                        name: "ipad",
                        price: 2000,
                        choose: 2,
                    },
                    {
                        name: "MacBook",
                        price: 3000,
                        choose: 0,
                    },
                    {
                        name: "iMac",
                        price: 4000,
                        choose: 4,
                    },
                ],
            },
            computed: {
                fullName() {
                    return this.data.name.first + this.data.name.last;
                },

                getDataSource() {
                    return  this.data.dataSource;
                },


                totalCount() {
                    let sum = 0;
                    for (const g of this.data.goodsDataSource) {
                        sum += g.choose;
                    }
                    return sum;
                },
                totalPrice() {
                    let sum = 0;
                    for (const g of this.data.goodsDataSource) {
                        sum += g.price * g.choose;
                    }
                    return sum;
                }
            },
            methods: {
                change(e) {
                    e.preventDefault();
                    if (
                        this.data[this.data.selectValue] === undefined ||
                        this.data[this.data.selectValue] === null
                    ) {
                        console.log(`[selectValue] is ${this.data.selectValue}`);
                        return;
                    }
                    if (typeof this.data[this.data.selectValue] === "boolean") {
                        this.data[this.data.selectValue] = !this.data[this.data.selectValue];
                        return;
                    }
                    this.data[this.data.selectValue] = new Date().getTime();
                },

                添加goods(e) {
                    const index = e.target.dataset.index;
                    this.data.goodsDataSource[index].choose++;
                    console.log(this.data.goodsDataSource[index], "choose + 1");
                },

                减少goods(e) {
                    const index = e.target.dataset.index;
                    this.data.goodsDataSource[index].choose--;
                    if (this.data.goodsDataSource[index].choose < 0) {
                        this.data.goodsDataSource[index].choose = 0;
                    }
                    console.log(this.data.goodsDataSource[index], "choose - 1");
                }
            }
        });
    </script>
</body>
</html>

